<template>
  <!-- 项目列表 -->
  <ul class="mallList">
    <li class="list-item" v-for="(item, index) in mallList" :key="index">
      <div class="checkbox" v-if="isEdit">
        <img v-if="item.isChecked" :src="imgOss+'/checked.png'" alt="" @click="changeChecked(item)">
        <img v-if="!item.isChecked" :src="imgOss+'/check.png'" alt="" @click="changeChecked(item)">
      </div>
      <div class="main"  @click="todetail(item)">
        <div class="maintop">
          <div class="image">
            <!-- 下架 -->
            <img v-if="item.isDel==1" class="xiajia" :src="imgOss+'/xiajia.png'" alt />
            <img v-if="imgUrl&&item.image" :src="imgUrl+item.image" :lazy-load="true" class="img" />
            <span class="buyingImg" v-html="item.activityStatus==1?'即将开抢':'抢购中'" v-if="item.activityStatus == 1 || item.activityStatus == 2"></span>
            <div class="mallImg_top" v-if="item.tag_name && item.tag_name !== null">{{item.tag_name?item.tag_name:''}}</div>
          </div>
          <div class="content">
            <h4 class="project-name">{{item.name}}</h4>
            <div class="hos-info">
              <div class="hos-name" v-if="item.hospitalsName!==null">{{item.hospitalsName}}</div>
              <div class="distance">{{item.distance}}km</div>
            </div>
            <div class="hos-sales">{{item.appointmentPeoples==null?'0':item.appointmentPeoples}}人已预约</div>
            <div class="price">
              <div class="old-price clearfix">
                <div class="num"></div>
              </div>
              <div class="bottom clearfix">
                <div class="left">
                  <span class="icon1" v-if="item.activityStatus==1 || item.activityStatus==3">优惠价</span>
                  <span class="num" v-if="item.activityStatus!==4"><span class="icon">￥</span>{{item.discounts}}</span>
                  <span class="num" v-if="item.activityStatus==4"><span class="icon">￥</span>{{item.projectPrice}}</span>
                  <span v-if="item.activityStatus==3">起</span>
                </div>
                <div class="right wei" v-if="item.isRepair =='1'">
                  <img :src="imgUrl+'h5_images/mp_images/mp_3.1.1/bt/wq.png'" alt class="img" />
                </div>
                <div class="right clearfix" v-if="item.insuranceIsSet=='2'">
                  <img :src="imgUrl+'h5_images/mp_images/mp_3.1.1/bt/zmb.png'" alt class="img" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mainbottom">
          <p class="plus" v-if="item.activityStatus!== 2 && item.plusTitle">
            <img src="https://img.ameimeika.com/h5_images/lifebeauty/plus_tag.png" alt class="tag" />
            {{item.plusTitle}}
          </p>
          <p class="plus plusjf" v-if="item.deductionMethod == 1">
            <img v-if="imgOss" :src="imgOss+'/mp_3.1.6/goldcoin/lab_silver.png'" alt class="tag" />
             金币可抵{{item.deductionCredit}}元
          </p>
          <p class="plus plusjf" v-if="item.deductionMethod == 2">
            <img v-if="imgOss" :src="imgOss+'/mp_3.1.6/goldcoin/lab_gold.png'" alt class="tag" />
             银币可抵{{item.deductionCredit}}元
          </p>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      imgOss: common.image_resource
    };
  },
  watch: {
    mallList(newval, oldval) {
      this.mallList = newval;
    }
  },
  props: {
    isEdit: false,
    mallList: []
  },
  methods: {
    changeChecked(item) {
      item.isChecked = !item.isChecked;
      this.$emit("projectClick", this.mallList);
    },
    // 项目详情
    todetail(item) {
      if (item.isDel == 1) {
        return;
      }
      wx.navigateTo({
        url: `/pages/package_projects/project_detail/main?id=${item.id}`
      });
    }
  }
};
</script>
<style scoped lang="less">
.mallList {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  .list-item {
    width: 100%;
    min-height: 120px;
    margin-bottom: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .checkbox {
      width:20px;
      height:20px;
      margin-right: 15px;
      img{
        width:20px;
        height:20px;
      }
    }
    .main {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 6px 0px rgba(240, 240, 240, 1);
      border-radius: 5px;
      .maintop{
        padding: 10px 10px 0;
        display: flex;
        box-sizing: border-box;
        .image {
          width:114px;
          height:114px;
          border-radius: 5px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }
          .xiajia{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 11;
          }
          .buyingImg {
            width: 44px;
            height: 17px;
            line-height: 17px;
            background: linear-gradient(
              315deg,
              rgba(230, 27, 100, 1) 0%,
              rgba(255, 56, 62, 1) 100%
            );
            border-radius: 4px;
            position: absolute;
            z-index: 1;
            color: #fff;
            text-align: center;
            font-size: 10px;
            bottom: 6px;
            right: 6px;
          }
          .mallImg_top {
            width: 22px;
            height: 22px;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
            background: url("https://h5.ameimeika.com/mp_images/mp_2.7/icon_intergralmall_list_tag.png")
              no-repeat;
            background-size: 100% 100%;
            line-height: 15px;
            text-align: center;
            position: absolute;
            top: 6px;
            left: 12px;
            font-size: 9px;
            font-family: "PingFangSC";
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
          }
        }
        .content {
          flex: 7;
          min-height: 100px;
          margin-left: 10px;
          position: relative;
          .project-name {
            font-size:14px;
            font-family:PingFangSC-Regular,PingFang SC;
            font-weight:400;
            color:#333333;
            line-height:18px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            .bao,
            .wei {
              width: 16px;
              height: 16px;
              display: inline-block;
              font-size: 12px;
              text-align: center;
              border: 1px solid #fff;
              box-sizing: border-box;
              border-radius: 2px;
              margin-bottom: 6px;
              line-height: 14px;
            }
            .wei {
              color: #ff383e;
              border-color: #ff383e;
              &.wei1 {
                margin-right: 4px;
              }
            }
            .bao {
              color: #0070ff;
              border-color: #0070ff;
              background: #fff;
            }
          }
          .hos-info {
            font-size:12px;
            font-family:PingFangSC-Regular,PingFang SC;
            font-weight:400;
            color:#999999;
            line-height:16px;
            margin-top: 4px;
            overflow: hidden;
            .hos-name {
              width: 66%;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              // margin-top: 2px;
              float: left;
            }
            .distance {
              float: right;
            }
          }
          .hos-sales{
            font-size:12px;
            font-family:PingFangSC-Regular,PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:16px;
            margin-top: 4px;
          }
          .plus {
            width: auto;
            height: 16px;
            background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/lifebeauty/3/titlebg.png")
              no-repeat;
            background-size: 100% 100%;
            line-height: 16px;
            color: #fff;
            text-align: center;
            padding: 1px 7px;
            margin-top: 3px;
            font-size: 10px;
            display: inline-block;
          }
          .user_point {
            font-size: 12px;
            color: #ff383e;
            .icon {
              font-size: 7px;
            }
          }
          .price {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            .old-price {
              vertical-align: bottom;
              .num {
                font-size: 10px;
                font-family: "Regular";
                color: rgba(204, 204, 204, 1);
                float: left;
                position: relative;
                &::before {
                  content: "";
                width: 100%;
                height: 1px;
                background-color: rgba(204, 204, 204, 1);
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                z-index: 1;
                }
              }
            }
            .available_points {
              font-size: 12px;
              color: #ff383e;
              .coin {
                font-size: 10px;
              }
              .num {
                font-size: 16px;
              }
            }
            .bottom {
              .left {
                float: left;
                font-size:9px;
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
                color:#FF383E;
                line-height:11px;
                .icon1 {
                  margin-right: 1px;
                }
                .num {
                  font-size:18px;
                  font-family:PingFangSC-Medium,PingFang SC;
                  font-weight:500;
                  line-height:11px;
                  margin-right: 2px;
                  .icon {
                    font-size:12px;
                    font-weight:400;
                    line-height:11px;
                    margin-right: 1px;
                  }
                }
              }
              .right {
                margin-top: 7px;
                float: right;
                width: 31px;
                height: 13px;
                margin-right: 7px;
                .img {
                  width: 100%;
                  height: 100%;
                  display: block;
                }
              }
              .wei {
                width: 22px;
                height: 13px;
                .img {
                  width: 100%;
                  height: 100%;
                  display: block;
                }
              }
            }
          }
        }
      }
      .mainbottom{
        width: 100%;
        padding: 0 10px 10px;
        box-sizing: border-box;
        .plus {
          font-size: 12px;
          font-family: "PingFangSC-Medium", "PingFang SC";
          font-weight: 500;
          color: #666666;
          display: flex;
          padding-top: 10px;
          .tag {
            width: 29px;
            height: 16px;
            margin-right: 4px;
          }
        }
        .plusjf{
          padding-top: 6px;
        }
      }
    }
  }
}
</style>
